<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>show.scss</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="../../../../../../css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../../../../../css/main.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../../../../../css/github.css" type="text/css" media="screen" />
<script src="../../../../../../js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/jquery-effect.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/main.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/highlight.pack.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
    <div class="banner">
        
        <h1>
            show.scss
        </h1>
        <ul class="files">
            
            <li>
                lib/assets/stylesheets/setting_app/organizational_structures/show.scss
                
            </li>
            <li>Last modified: 2017-02-15 16:12:36 +0800</li>
        </ul>
    </div>

    <div id="bodyContent">
        <div id="content">
  
    <div class="description">
      
<p><a href="myapp='ORGANIZATIONAL_STRUCTURE'">div#content</a> {</p>

<pre><code>margin-left: 20px;</code></pre>

<p>}</p>

<p><a href="myapp='ORGANIZATIONAL_STRUCTURE'">div#content</a> ul{</p>

<pre><code>list-style: none;</code></pre>

<p>}</p>

<p><a href="myapp='ORGANIZATIONAL_STRUCTURE'">div#content</a> .zuzhi{</p>

<pre><code>margin-top: 20px;
border : 1px solid #d9d9d9;
overflow: auto;
ul.company_tree{
  width : 22%;
  padding : 10px 8px;
  float : left;
  height: 640px;
  overflow-y : scroll;
  border-right: 1px solid #d9d9d9;
  overflow-x : scroll;

  &amp; &gt; li:before, &amp; &gt; li:after{
    border: 0 !important;
  }

  li{
    position: relative;

    &amp;:before,&amp;:after{
      content: &#39;&#39;;
      position: absolute;
      left: -25px;
    }

    &amp;:last-child::before{
      height: 35px;
    }

    &amp;:before{
      border-left: 1px solid #d9d9d9;
      height: 100%;
      top: -15px;
    }

    &amp;:after{
      border-top:1px solid #d9d9d9;
      height:20px;
      top:20px;
      width:25px
    }

    div.branch_name{
      display: inline-flex;
      align-items : center;
      height : 32px;
      border : 1px solid #B7B5B5;
      border-radius: 5px;
      box-shadow: 3px 4px 5px #E0DFDF;

      .fa-save,.fa-undo{
        display: none;
      }

      &amp;.active{
        span,i.fa-list{
          color : red;
        }
      }
      span {
        white-space: nowrap;
        height : 22px;
        line-height : 22px;
        border : 1px dashed #D0B4B4;
        padding:0 8px;
        font-size : 14px;
        cursor : pointer;
        border-radius: 5px;
        font-weight : bold;
      }
      input {
        display : none;
        width : 90px;
        height : 22px;
        line-height : 22px;
      }

      i{
        font-size : 18px;
        cursor : pointer;
        margin:0 5px;
        width : 15px;

        &amp;.fa-folder-open,&amp;.fa-folder{
          color : #CBA907;
        }

        &amp;.fa-plus-circle{
          color : #33B933;
        }

        &amp;.fa-times{
          color : #900;
        }
      }

      i.fa-folder{
        display : none;
      }

      &amp;.slide_up{
        i.fa-folder-open{
          display : none;
        }
        i.fa-folder{
          display : inline-block;
        }
      }

      &amp;.editing{
        span { display : none;}
        input { display : inline-block;}
        .fa-list,.fa-plus-circle,.fa-times{
          display: none;
        }

        .fa-save,.fa-undo{
          display: inline-block;
        }
      }
    }

    ul{
      padding-left : 30px;
      margin-top : 15px;
      li{
        padding:5px 0;
      }
    }
  }
}

div.branch_details{
  float : left;
  width : 75.2%;
  height : 660px;
  margin-left: 20px;
  overflow-y : scroll;

  p{
    font-size : 20px;
    text-indent : 20px;
    margin-top : 10px;
  }

  .position{
    float : left;
    display : flex;
    align-items : center;
    border : 1px solid #d9d9d9;
    max-width : 96%;
    min-height : 42px;
    margin: 10px 0 10px 10px;
    border-radius: 5px;
    padding:0 0 0 8px;
    background: #FDFFF0;

    .position_name{
      float:left;
      display: flex;
      align-items : center;
      width : 160px;

      .fa-save,.fa-undo{
        display: none;
      }

      span{
        float : left;
        display : inline-block;
        text-align : center;
        width : 100px;
        height : 25px;
        line-height : 25px;
        font-size : 14px;
        border: 1px dashed #999;
        cursor : pointer;
        border-radius: 5px;
        font-weight : bold;
      }

      input[type=&quot;text&quot;]{
        display:none;
      }

      &amp;.editing{
        span {
          display : none;
        }
        input[type=&quot;text&quot;]{
          display: inline-block;
          width : 98px;
          height : 25px;
          line-height : 25px;
        }

        .fa-save,.fa-undo{
          display: inline-block;
        }
        .fa-angle-double-left,.fa-angle-double-right{
          display: none;
        }
      }

      i{
        cursor : pointer;
        font-size : 20px;
        margin-left : 10px;
        width : 30px;
        text-align : center;
      }

      i.fa-angle-double-left{
        display : inline-block;
      }
      i.fa-angle-double-right{
        display : none;
      }

      &amp;.slide_up{

        &amp;.editing{
          .fa-angle-double-right{
            display : none;
          }
        }

        i.fa-angle-double-left{
          display : none;
        }
        i.fa-angle-double-right{
          display : inline-block;
        }
      }
    }

    .staff{
      margin-left : 10px;
      padding : 10px;
      width : 800px;
      min-height: 42px;
      overflow : auto;
      border-left : 1px solid #d9d9d9;
      background: #fff;
      border-radius:3px;

      a{
        display : inline-block;
        margin-left:5px;
        height : 28px;
        line-height : 28px;
        letter-spacing:1px;
        margin-top: 10px;
        padding: 0px 10px;
        font-size : 16px;
        cursor : default;
        &amp;.fa-female{
          color : pink;
        }
        &amp;.fa-male{
          color:#82AEF5
        }
      }
    }
  }

  i.fa-plus-square{
    display : block;
    width : 30px;
    font-size : 30px;
    color: #33B933;
    margin-left : 10px;
    cursor : pointer;
  }
}</code></pre>

<p>}</p>

    </div>
  


  


  
  


  


  

  



  

    

    

    


    


    <!-- Methods -->
              </div>

    </div>
  </body>
</html>
